﻿<%@ Page Title="零售分部用户信息" Language="C#" MasterPageFile="~/master/m.master" %>

<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <!-- <link rel="stylesheet" href="../assets/css/system/GroupUser.css" /> -->
    <link href="../assets/css/plugins/jsTree/style.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <style>
        .system-box .right-side {
            width: 100%;
        }

        .system-box .right-content-box {
            overflow: hidden;
        }

        .content-container {
            background: #fff;
            width: 100%;
            padding: 8px;
            float: left;
            margin: 5px;
            /*margin: 10px auto;*/
            /*border-right: 1px solid #dfdfdd;
	border-bottom: 1px solid #dfdfdd;*/
            border: 1px solid #dfdfdd;
            ;
        }

            .content-container.sp {
                width: calc(100% - 601px);
                border-right: 0;
            }

            .content-container .header-tips {
                margin-bottom: 15px;
            }

        .control-box p {
            margin: 0;
            overflow: hidden;
        }

            .control-box p span {
                float: left;
                line-height: 34px;
                margin-right: 8px;
            }

            .control-box p .select {
                margin: 0;
                float: left;
            }

            .control-box p #search-text {
                display: inline-block;
                width: calc(100% - 138px);
                margin-right: 8px;
                float: left;
            }

        .content-container .areas,
        .content-container .citySearch {
            margin: 10px 0 0 0;
            display: inline-block;
        }

        .content-container .left-title,
        .content-container .right-title {
            display: inline-block;
            margin: 8px 0 0 0;
        }

        .content-container .right-title {
            margin-left: 54px;
        }

        .chooseArea {
            overflow: hidden;
        }

            .chooseArea .leftArea1,
            .chooseArea .rightArea1,
            .chooseArea .leftArea2,
            .chooseArea .rightArea2 {
                border: 1px solid #e5e6e7;
                float: left;
                overflow: auto;
            }

            .chooseArea .areaOutbox {
                float: left;
                width: 50%;
            }


        .leftArea1-1 {
            width: 50%;
        }

        .input-group {
            width: 50%;
        }

        #btnSear, #btnSear2 {
            width: 80%;
        }

        #btnSearc, #btnSearc2 {
            width: 20%;
        }

        .header-tips {
            text-align: center;
            font-size: 18px;
        }

        .border-1 {
            border-right: 1px solid #dcc7c7;
        }

        .leftArea1-width {
            width: 100%;
        }

        .pborder {
            border: 1px solid #dcc7c7;
            margin: 0;
            text-align: center;
            border-bottom: none;
            font-size: 16px;
        }

        .pborder1 {
            border-left: none;
        }

        .content-r {
            padding-bottom: 40px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" runat="Server">
    <div class="system-box container-fluid">
        <div class="btns-container"></div>
        <div class="row">
            <div class="col-sm-6 border-1">
                <div class="right-content-box">
                    <div class="content-container ">
                        <div class="header-tips">设置用户店铺权限</div>

                        <div class="chooseArea">
                            <div class="areaOutbox">
                                <p class="pborder">待选用户</p>

                                <div class="leftArea1 leftArea1-width">
                                    <div id="UserList"></div>

                                </div>

                            </div>
                            <div>
                                <p class="pborder pborder1">店铺列表</p>
                                <div class="leftArea1 leftArea1-1">

                                    <div id="ShopList"></div>
                                </div>
                            </div>


                        </div>
                        <div class="searchbox">
                            <div class="input-group">
                                <input type="text" class="form-control filter-users" id="btnSear" placeholder="请输入用户名">
                                <input class="btn btn-default btn-primary btn-filter-users" id="btnSearc" type="button" value="筛选"></input>

                            </div>
                            <!-- /input-group -->
                        </div>
                    </div>
                </div>
            </div>


            <!-- right-side -->
            <div class="col-sm-6 border-1">
                <div class="right-content-box">
                    <div class="content-container ">
                        <div class="header-tips">设置零售分部用户关系</div>

                        <div class="chooseArea">
                            <div class="areaOutbox">
                                <p class="pborder">用户列表</p>

                                <div class="leftArea1 leftArea1-width">
                                    <div id="OAUserList"></div>
                                </div>
                            </div>
                            <div>
                                <p class="pborder pborder1">零售分部</p>
                                <div class="leftArea1 leftArea1-1">
                                    <div id="OperationAreaList"></div>
                                </div>
                            </div>


                        </div>
                        <div class="searchbox">
                            <div class="input-group">
                                <input type="text" class="form-control filter-users" id="btnSear2" placeholder="请输入用户名">
                                <input class="btn btn-default btn-primary btn-filter-users" id="btnSearc2" type="button" value="筛选"></input>

                            </div>
                            <!-- /input-group -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" runat="Server">
    <script src="../assets/js/page/rScroll.js"></script>
    <script src="../assets/js/plugins/jsTree/jstree.min.js"></script>
    <script>
        $(document).ready(function () {
            layer.msg('玩命加载中……', {
                icon: 16,
                shade: 0.01,
                time: 0,
                maxWidth: 200
            });

            //模块ID
            var ModuleID = Y.getUrlParam("ModuleID");


            //获取按钮
            commonUtil.loadBtnList(ModuleID, function () {
                rScroll();
            });
            //获取数据组对应的用户
            var GetAllShopList = function (callback) {
                Y.API2('UserShop', 'GetAllShopList', {}, function (data) {
                    layer.closeAll('dialog');
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        callback(data);
                    }

                });
            }
            GetAllShopList(function (json) {
                //  ShopList

                var newdata = $.map(json, function (obj) {

                    obj.id = obj.NodeID;
                    //  obj.parent = "#";
                    obj.text = obj.NodeName;
                    obj.state = {
                        opened: false,
                        selected: false,
                        disabled: false
                    };
                    obj.icon = "fa fa-folder text-info";
                    obj.li_attr = {
                        isShop: false
                    };
                    obj.children = $.map(obj.Childs, function (obj2) {
                        obj2.id = obj2.NodeID;
                        //   obj2.parent = obj.ParentAreaID;
                        obj2.text = obj2.NodeName;
                        obj2.state = {
                            opened: false,
                            selected: false,
                            disabled: false
                        };
                        obj2.li_attr = {
                            isShop: false
                        };
                        obj2.icon = "fa fa-folder text-info";
                        obj2.children = $.map(obj2.Childs, function (obj3) {
                            obj3.id = obj3.NodeID;
                            //    obj3.parent = obj2.AreaID;
                            obj3.text = obj3.NodeName;
                            obj3.li_attr = {
                                isShop: true
                            };
                            obj3.state = {
                                selected: false
                            };
                            obj3.icon = "fa fa-file-text-o text-info";
                            return obj3;
                        });
                        return obj2;
                    });
                    return obj;
                });
                //  console.log(newdata);
                //加载待选列表
                $('#ShopList').jstree({
                    'core': {
                        data: newdata
                    },
                    "checkbox": {
                        "keep_selected_style": false
                    },
                    "types": {
                        "default": {
                            "icon": "fa fa-folder text-info"
                        },
                        "child": {
                            "icon": "fa fa-file-text-o text-info"
                        }
                    },
                    "plugins": ["checkbox", "types"]

                }).on("ready.jstree", function () {


                })
            });

            //所有用户列表
            var GetAllUserList = function (callback) {
                Y.API2('DataGroup', 'GetAllUserList', {
                    Keys: " "
                }, function (data) {

                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        callback(data);
                    }
                    //  console.log(data)
                });
            }
            GetAllUserList(function (json) {
                var newdata = $.map(json, function (obj) {

                    obj.id = obj.UserID;
                    obj.parent = "#";

                    obj.text = obj.UserName + "【" + obj.UserCode + "】";
                    obj.state = {
                        opened: true,
                        selected: false
                    };
                    obj.icon = "fa fa-user text-info";
                    return obj;
                });
                //  console.log(newdata);
                //加载零售区域用户列表
                $('#OAUserList').jstree({
                    'core': {
                        data: newdata
                    },
                    "checkbox": {
                        "keep_selected_style": false
                    },
                    "types": {
                        "default": {
                            "icon": "fa fa-folder text-info"
                        },
                        "child": {
                            "icon": "fa fa-file-text-o text-info"
                        }
                    },
                    "search": {
                        show_only_matches: true
                    },
                    "plugins": ["search"]

                }).on("changed.jstree", function (e, data) {
                    layer.msg('玩命加载中……', {
                        icon: 16,
                        shade: 0.01,
                        time: 0,
                        maxWidth: 200
                    });
                    //debugger;
                    //用户对应的零售区域
                    GetUserOperationAreaList(data.selected[0], function (json) {
                        $('#OperationAreaList').jstree("deselect_all");//反选所有零售区域
                        $('#OperationAreaList').jstree("select_node", json.OperationAreaID); //选择对应的零售区域

                    });
                });

                //加载店铺权限用户列表
                $('#UserList').jstree({
                    'core': {
                        data: newdata
                    },
                    "search": {
                        show_only_matches: true
                    },
                    "plugins": ["search"]
                }).on("changed.jstree", function (e, data) {
                    layer.msg('玩命加载中……', {
                        icon: 16,
                        shade: 0.01,
                        time: 0,
                        maxWidth: 200
                    });
                    //debugger;
                    //用户已选店铺
                    GetUserShopList(data.selected[0], function (json) {
                        $('#ShopList').jstree("deselect_all");
                        $('#ShopList').jstree("select_node", json); //选择用户

                    });
                });

            });
            //已选店铺列表
            var GetUserShopList = function (UserID, callback) {
                Y.API2('UserShop', 'GetUserShopList', {
                    UserID: UserID
                }, function (data) {
                    layer.closeAll('dialog');
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        callback(data);
                    }
                    // console.log(data)
                });
            }

            //用户已选零售区域列表
            var GetUserOperationAreaList = function (UserId, callback) {
                Y.API2('OperationAreaUser', 'GetOperationAreaListByUser', {
                    UserId: UserId
                }, function (data) {
                    layer.closeAll('dialog');
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        callback(data);
                    }
                    // console.log(data)
                });
            }


            //提交
            $(document).on("click", "#btn-pepole", function () {
                var userID = $('#UserList').jstree("get_selected");
                var shopList = $('#ShopList').jstree("get_bottom_selected", true);
                if (Y.checkNull(userID)) {
                    swal("请选择用户", '', 'error');
                    return;
                }
                var _shoplist = [""];
                $.each(shopList, function (i, obj) {
                    if (obj.li_attr.isShop) {
                        _shoplist.push(obj.id);
                    }

                });
                layer.msg('玩命加载中……', {
                    icon: 16,
                    shade: 0.01,
                    time: 0,
                    maxWidth: 200
                });
                Y.API2('UserShop', 'Save', {
                    UserID: userID.toString(),
                    ShopList: _shoplist
                }, function (data) {
                    layer.closeAll('dialog');
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                        //
                        layer.closeAll('dialog');
                    } else {
                        swal("提交成功！", '', 'success');
                    }
                })


            });

            //过滤 筛选用户 设置用户店铺权限
            $("#btnSearc").on("click", function () {
                var v = $("#btnSear").val();
                $('#UserList').jstree("search", v);

            });
            var to = false;
            $('#btnSear').on("keyup", function () {
                var v = $("#btnSear").val();
                if (to) {
                    clearTimeout(to);
                }
                to = setTimeout(function () {
                    $('#UserList').jstree("search", v);
                }, 250);
            });

            //过滤 筛选用户 设置零售分部用户关系
            $("#btnSearc2").on("click", function () {
                var v = $("#btnSear2").val();
                $('#OAUserList').jstree("search", v);

            });
            var to2 = false;
            $('#btnSear2').on("keyup", function () {
                var v = $("#btnSear2").val();
                if (to2) {
                    clearTimeout(to2);
                }
                to2 = setTimeout(function () {
                    $('#OAUserList').jstree("search", v);
                }, 250);
            });

            //自动高 DOCUMENT高减按钮栏+其它
            $(".chooseArea .leftArea1").height($(document).height() - (35 + 145));
        })




        var GetAllOperationAreaList = function (callback) {
            Y.API2('DwShop', 'GetBasOperationArea', {

            }, function (data) {
                if (data.Success == false) {
                    swal(data.Message, '', 'error');
                } else {
                    callback(data);
                }
            });
        }
        GetAllOperationAreaList(function (json) {
            var newdata = $.map(json, function (obj) {
                obj.id = obj.OperationAreaID;
                obj.parent = "#";

                obj.text = obj.OperationAreaName;
                obj.state = {
                    opened: true,
                    selected: false,
                    disabled: false,
                };
                obj.icon = "fa fa-user text-info";
                return obj;
            });

            //零售列表
            $('#OperationAreaList').jstree({
                'core': {
                    data: newdata
                },
                "search": {
                    show_only_matches: true
                },
                "plugins": ["checkbox", "types"]
            }).on("changed.jstree",
                function (e, data) {
                    //零售分部已选用户
                    //GetOAUserList(data.selected[0], function (json) {
                    //    $('#OAUserList').jstree("deselect_all");
                    //    $('#OAUserList').jstree("select_node", json.AllChooseList);
                    //    $('#OAUserList').jstree("disable_node", json.AllChooseList);
                    //    $('#OAUserList').jstree("enable_node", json.CurrentUserList);
                    //    $('#OAUserList').jstree("select_node", json.CurrentUserList);
                });
        });

        //已选用户列表
        var GetOAUserList = function (OperationAreaID, callback) {
            Y.API2('OperationAreaUser', 'GetOperationAreaUserList', {
                OperationAreaID: OperationAreaID
            }, function (data) {
                layer.closeAll('dialog');
                if (data.Success == false) {
                    swal(data.Message, '', 'error');
                } else {
                    callback(data);
                }
            });
        }

        //保存分部用户关系
        $(document).on("click", "#btn-oaUser", function () {
            //debugger;
            var operationAreaID = $('#OperationAreaList').jstree("get_bottom_selected");
            if (operationAreaID.length == 0) {
                operationAreaID.push("default");
            }
            var oaUserId = $('#OAUserList').jstree("get_selected")[0];
            if (Y.checkNull(oaUserId)) {
                swal("请选择用户", '', 'error');
                return;
            }
            layer.msg('玩命加载中……', {
                icon: 16,
                shade: 0.01,
                time: 0,
                maxWidth: 200
            });
            Y.API2('OperationAreaUser', 'SaveOperationAreaUser', {
                UserId: oaUserId,
                OperationAreaID: operationAreaID
            }, function (data) {
                layer.closeAll('dialog');
                if (data.Success == false) {
                    swal(data.Message, '', 'error');
                    layer.closeAll('dialog');
                } else {
                    swal("提交成功！", '', 'success');
                }
            })
        });
    </script>
</asp:Content>
